<template>
  <div>
    <div class="ht">
      <h3>{{primaryTitle}}</h3>
      <p>是否有如下表现？</p>
      <ol>
        <li v-for="item of expressionInfo">
          ■ {{item.content}}
        </li>
      </ol>
    </div>
    <van-cell title="科学分析影响孩子表现的成因">
      <template #right-icon>
        <van-button
            size="mini" type="primary">
          预约评估
        </van-button>
      </template>
    </van-cell>
    <div style="padding: 10px 16px">
      <van-button
          v-for="item of causeInfo"
          block round style="margin-bottom: 10px" type="primary">
        {{item.content}}
      </van-button>
    </div>
    <van-divider>怎么解决？</van-divider>
    <div style="padding: 10px 16px;font-size: 14px;color: #2c3e50">
      <ol style="padding-left: 20px">
        <li v-for="item of solveInfo" style="list-style: square;margin-bottom: 10px">
          {{item.content}}
        </li>
      </ol>
    </div>
    <van-divider>根据评估报告，专家推荐不同的课程？</van-divider>
    <div v-for="item of courseVos" :key="item.id">
      <van-card
          :thumb="item.coverPicture"
          :title="item.courseTitle"
          @click="$router.push(`/kdetail?id=${item.id}`)" >
        <template #tags>
          <p style="font-size: 14px">{{item.courseIntroduction}}</p>
        </template>
        <template #footer>
          <van-button size="mini">阅读更多</van-button>
        </template>
      </van-card>
      <van-divider />
    </div>
  </div>
</template>

<script>
import { getServiceDetail } from "@/api";

export default {
  name: "sdetail",
  data() {
    return {
      expressionInfo:[],
      courseVos:[],
      solveInfo:[],
      primaryTitle:"",
      causeInfo:[]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList(){
      const res = await getServiceDetail(this.$route.query.dictCode)
      console.log(res)
      this.expressionInfo = res.expressionInfo
      this.courseVos = res.courseVos
      this.solveInfo = res.solveInfo
      this.primaryTitle = res.primaryTitle
      this.causeInfo = res.causeInfo
    }
  }
}
</script>

<style scoped>
.ht{
  color: white;
  padding: 30px 0;
  background-color: #95d5b5;
}
.ht h3{
  text-indent: 40px;
}
.ht li{
  list-style: square;
}
.ht p,.ht li{
  text-indent: 50px;
  font-size: 14px;
  margin: 6px 0;
}
>>>.van-card__thumb{
  width: 120px;
  height: 120px;
}
.van-card{
  background-color: #fff;
}
>>>.van-card__content{
  font-size: 16px;
}
>>>.van-card__title{
  line-height: normal;
}
</style>
